<template>
  <div class="app-container">
    <div class="hor mg-b-10">
      <!--      <el-select v-model="isLock" placeholder="是否冻结" clearable @change="onLockChange">-->
      <!--        <el-option-->
      <!--          label="未冻结"-->
      <!--          :value="false">-->
      <!--        </el-option>-->
      <!--        <el-option-->
      <!--          label="已冻结"-->
      <!--          :value="true">-->
      <!--        </el-option>-->
      <!--      </el-select>-->
      <el-select v-model="isFlag" placeholder="是否可用" clearable @change="onFlagChange"
                 class="mg-l-10">
        <el-option
          label="可用"
          :value="1">
        </el-option>
        <el-option
          label="已注销"
          :value="0">
        </el-option>
      </el-select>
      <el-input
        style="width: 200px"
        class="mg-l-10"
        placeholder="请输入姓名"
        v-model="searchName"
        @clear="onInputClear(1)"
        clearable>
      </el-input>
      <el-input
        style="width: 200px"
        class="mg-l-10"
        placeholder="请输入电话"
        v-model="searchPhone"
        @clear="onInputClear(2)"
        clearable>
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class="mg-l-20">搜索
      </el-button>
      <div class="flex1"></div>
      <el-popconfirm
        class="mg-l-10"
        title="是否导出选中列？"
        icon="el-icon-info"
        iconColor="red"
        confirmButtonText='导出'
        @confirm="onClickExport()">
        <el-button slot="reference" type="warning">导出</el-button>
      </el-popconfirm>
      <!--      <el-button type="primary" icon="el-icon-plus" class="mg-l-10"-->
      <!--                 @click="onClickAdd()"></el-button>-->
      <!--      <el-button-group class="mg-l-10">-->
      <!--        <el-button type="success" @click="batchLock(2)">启用</el-button>-->
      <!--        <el-tooltip class="item" effect="dark" content="禁用后无法登陆" placement="bottom">-->
      <!--          <el-button type="danger" @click="batchLock(1)">禁用</el-button>-->
      <!--        </el-tooltip>-->

      <!--        &lt;!&ndash;        <el-button type="success" @click="batchDelete(2)">启用</el-button>&ndash;&gt;-->
      <!--        <el-tooltip class="item" effect="dark" content="删除账户无法正常使用" placement="bottom">-->
      <!--          <el-button type="danger" @click="batchDelete(1)">删除</el-button>-->
      <!--        </el-tooltip>-->

      <!--      </el-button-group>-->
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="allList"
      :height="autoHeight"
      element-loading-text="Loading"
      @cell-click="onCellClick"
      @selection-change="handleSelectionChange"
      @row-click="onItemClick"
      @row-dblclick="onItemDoubleClick"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <!--      <el-table-column align="center" label="ID" width="150">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.id}}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="头像" width="80">
        <template slot-scope="scope">
          <div class="ver ver-center hor-center">
            <el-avatar fit="cover" :src="scope.row.avatarUrl+'?imageView2/1/w/50/h/50'"></el-avatar>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <div class="ver">
            <div>姓名：{{ scope.row.name }}</div>
            <div>昵称：{{ scope.row.nickName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="地区" width="200">
        <template slot-scope="scope">
          {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.region }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="200">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>
      <el-table-column label="性别" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.gender==1?'男':((scope.row.gender==null||scope.row.gender==0)?'未知':'女') }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==0" type="info">未提交</el-tag>
          <el-tag v-else-if="scope.row.status==1" type="warning">审核中</el-tag>
          <el-tag v-else-if="scope.row.status==2" type="danger">未通过</el-tag>
          <el-tag v-else-if="scope.row.status==10" type="success">已通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所属医院" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.hospital }}
        </template>
      </el-table-column>
      <el-table-column label="所属科室" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.hospitalSubject }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <div class="ver hor-center">
            <el-button type="warning"   size="small"
                       @click.stop="onClickView(scope.row)">查看
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="hor">
      <div class="flex1"></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[20, 50, 100, 200,500,1000,5000,10000]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="mg-t-10">
      </el-pagination>
    </div>
    <el-dialog
      title="信息"
      :visible.sync="userInfoDialogShow"
      width="600px"
      @open="onDialogOpen"
      :close-on-click-modal=false
      center>
      <div class="ver match-width">
        <el-form label-width="80px">
          <el-row>
            <el-col :span="24">
              <div class="hor ver-center hor-center">
                <el-avatar fit="cover" style="width: 100px;height:100px"
                           :src="userDetail.avatarUrl"></el-avatar>
              </div>
            </el-col>
          </el-row>

          <el-row class="mg-t-20">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="userDetail.name" readonly="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="userDetail.cardNum" readonly="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年龄">
                <el-input v-model="userDetail.age" readonly="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <div v-if="userDetail.gender==1">男</div>
                <div v-if="userDetail.gender==2">女</div>
                <div v-if="userDetail.gender==0">未知</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属医院">
                <el-input v-model="userDetail.hospital" readonly="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科室">
                <el-input v-model="userDetail.hospitalSubject" readonly="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="userDetail.phone" readonly="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地区">
                <div>{{userDetail.province}}{{userDetail.city}}{{userDetail.region}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱">
                <el-input v-model="userDetail.email" readonly="true"/>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="邮箱">-->
            <!--                <el-input v-model="userDetail.email"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="个人简介">
                <div style="height: 100px;" class="bg-common pd-lr15">{{userDetail.des}}
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份正面">
                <el-image :src="userDetail.idCardPathFrontUrl" style="height: 150px"
                          fit="cover"
                          @click="onClickShowBigImg(userDetail.idCardPathFrontUrl)"></el-image>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份反面">
                <el-image :src="userDetail.idCardPathReverseUrl" style="height: 150px"
                          fit="cover"
                          @click="onClickShowBigImg(userDetail.idCardPathReverseUrl)"></el-image>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="执业证或资格证">
                <el-image :src="userDetail.doctorPathUrl" style="height: 300px"
                          fit="cover"
                          @click="onClickShowBigImg(userDetail.doctorPathUrl)"></el-image>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="审核">
                <el-select v-model="userDetail.status" placeholder="审核状态">
                  <el-option
                    :key="1"
                    label="审核中"
                    :value="1">
                  </el-option>
                  <el-option
                    :key="2"
                    label="不通过"
                    :value="2">
                  </el-option>
                  <el-option
                    :key="10"
                    label="认证通过"
                    :value="10">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="userDetail.status==2">
              <el-form-item label="原因">
                <el-input type="textarea" v-model="userDetail.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>


        <div class="hor match-width ver-center hor-center mg-t-20" v-if="userDetail.status!=0">
          <el-button @click="userInfoDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="onClickSave" :loading="onSaveLoading">保 存</el-button>
        </div>

      </div>
    </el-dialog>
    <el-dialog
      title="查看大图"
      :visible.sync="bigImgDialogShow"
      :close-on-click-modal=false
      center
      width="40%"
    >
      <el-image
        style="width: 100%; height: auto"
        :src="bigImgUrl"
        :fit="scale-down"></el-image>
    </el-dialog>
  </div>

</template>
<style>
</style>
<script>
  import {
    getList,
    batchLock,
    batchDelete,
    queryRoleList,
    saveUser,
    exportExcel
  } from '@/api/auth/auth'
  import View from "../../layout/view";

  export default {
    components: {View},
    filters: {
      // statusFilter(status) {
      //   const statusMap = {
      //     published: 'success',
      //     draft: 'gray',
      //     deleted: 'danger'
      //   }
      //   return statusMap[status]
      // }
    },
    data() {
      return {
        allList: null,
        allRole: null,
        page: 1,
        size: 20,
        total: 0,
        autoHeight: 800,//根据屏幕高度自动计算的高度
        //筛选参数
        params: {},
        isLock: '',
        isFlag: '',
        searchName: '',
        searchPhone: '',
        selectRowList: [],

        //信息窗口
        userInfoDialogShow: false,
        userDetail: {},
        selectRoles: [],
        onSaveLoading: false,
        //大图
        bigImgDialogShow: false,
        bigImgUrl: '',

        listLoading: true
      }
    }, beforeMount() {
      this.authHeight = document.body.scrollHeight - 190
    }, mounted() {
      this.fetchData()
    },
    created() {
    },
    methods: {
      fetchData() {
        this.listLoading = true
        const data = new FormData()
        for (var key in this.params) {//直接去除掉空值的对象
          if (this.isEmpty(this.params[key])) {
            delete this.params[key]
          }
        }
        this.params["status_in"] = [1, 2, 10];
        this.params['flag'] = 1;
        console.log(this.params);
        data.append('params', JSON.stringify(this.params));
        data.append('page', this.page)
        data.append('size', this.size)
        data.append('sortJsonStr', null)

        getList(data).then(response => {
          this.allList = response.data
          for (let i = 0; i < this.allList.length; i++) {
            if (this.allList[i].gender == null) {//为空的默认为0
              this.allList[i].gender = 0
            }
            this.allList[i].gender += ''
          }
          this.total = response.totalElements

          this.listLoading = false
        })
      }, batchLock(operate) {
        if (!this.isHadPermission(['userOperateAccess'])) {
          this.noPermissionHint()
          return
        }

        const _this = this
        if (this.selectRowList == null || this.selectRowList.length == 0) {
          this.$message({
            message: '请选择对象',
            type: 'warning',
            duration: 1000
          })
          return
        }
        const array = []
        for (let i = 0; i < this.selectRowList.length; i++) {
          array.push(this.selectRowList[i].id)
        }
        const data = new FormData()
        data.append('ids', array)
        data.append('operate', operate)

        this.$message({
          message: '操作中',
          type: 'success',
          duration: 1000
        })

        batchLock(data).then(response => {
          this.$message({
            message: operate === 1 ? '冻结成功' : '解冻成功',
            type: 'success',
            duration: 3000
          })
          _this.fetchData()
        })
      }, batchDelete(operate) {
        if (!this.isHadPermission(['userOperateAccess'])) {
          this.noPermissionHint()
          return
        }
        const _this = this
        if (this.selectRowList == null || this.selectRowList.length == 0) {
          this.$message({
            message: '请选择对象',
            type: 'warning',
            duration: 1000
          })
          return
        }
        const array = []
        for (let i = 0; i < this.selectRowList.length; i++) {
          array.push(this.selectRowList[i].id)
        }
        const data = new FormData()
        data.append('ids', array)
        data.append('operate', operate)

        this.$message({
          message: '操作中',
          type: 'success',
          duration: 1000
        })

        batchDelete(data).then(response => {
          this.$message({
            message: operate === 1 ? '删除成功' : '启用成功',
            type: 'success',
            duration: 3000
          })
          _this.fetchData()
        })
      }, getRoleList() {
        const data = new FormData()
        queryRoleList(data).then(response => {
          this.allRole = response.data
        })
      }, saveUser() {

        this.onSaveLoading = true
        //把选择的角色赋值过去
        if (this.selectRoles != null) {
          this.userDetail.authRoles = []
          for (let i = 0; i < this.selectRoles.length; i++) {
            for (let j = 0; j < this.allRole.length; j++) {
              if (this.selectRoles[i] === this.allRole[j].id) {
                this.userDetail.authRoles.push(this.allRole[j])
              }
            }
          }
        }
        const data = new FormData()
        data.append('json', JSON.stringify(this.userDetail))
        saveUser(data).then(response => {
          this.onSaveLoading = false
          this.userInfoDialogShow = false
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.fetchData()
        }).catch((e) => {
          this.onSaveLoading = false
        })
      }
      , handleSizeChange(val) {
        this.size = val
        this.fetchData()
      }, handleCurrentChange(val) {
        this.page = val
        this.fetchData()
      }, onLockChange(val) {
        this.params.locked = val
        this.fetchData()
      }, onFlagChange(val) {
        this.params.flag = val + ''
        this.fetchData()
      }, onClickSearch() {//点击搜索
        if (!this.isEmpty(this.searchName)) {
          this.params['name_like'] = ('%' + this.searchName.trim() + '%')
        } else {
          this.params['name_like'] = ''
        }
        if (!this.isEmpty(this.searchPhone)) {
          this.params['phone_like'] = ('%' + this.searchPhone.trim() + '%')
        } else {
          this.params['phone_like'] = ''
        }
        if (!this.isEmpty(this.searchNum)) {
          this.params['num_like'] = ('%' + this.searchNum.trim() + '%')
        } else {
          this.params['num_like'] = ''
        }

        this.fetchData()
      }, onInputClear(type) {//1.姓名
        if (type === 1) {
          this.searchName = ''
        } else if (type === 2) {
          this.searchPhone = ''
        } else if (type === 3) {
          this.searchNum = ''
        }
        this.onClickSearch()

      }, handleSelectionChange(rowList) {//多选变化监听
        this.selectRowList = rowList
      }, onCellClick(row, column, cell, event) {
        if (column.type == 'selection') {
          this.$refs.table.toggleRowSelection(row)
        }
      }
      , onItemClick(row) {//单行点击
      }
      , onItemDoubleClick(row) {//单行双击
        this.userInfoDialogShow = true
        this.userDetail = row
        if (this.userDetail.organization == null) {
          this.userDetail.organization = {}
        }
        if (this.userDetail.position == null) {
          this.userDetail.position = {}
        }
        // console.log(this.userDetail)
      }
      , onClickAdd() {
        if (!this.isHadPermission(['userOperateAccess'])) {
          this.noPermissionHint()
          return
        }

        this.userDetail = {
          organization: {},
          position: {}
        }
        this.userInfoDialogShow = true
      }, onDialogOpen() {
        this.getRoleList()
        //拼装角色列表选择
        this.selectRoles.splice(0, this.selectRoles.length)
        if (this.userDetail.authRoles != null) {
          for (let i = 0; i < this.userDetail.authRoles.length; i++) {
            this.selectRoles.push(this.userDetail.authRoles[i].id)
          }
        }
        this.getOrganizationList()
        console.log(this.userDetail)
        // setTimeout(function () {
        if (this.userDetail.organization != null && !this.isEmpty(this.userDetail.organization.id)) {
          this.getPositionList(this.userDetail.organization.id)
        }
        // }, 1000);
      }, onRoleChange(val) {
        this.selectRoles = val
      }, onClickSave() {//点击保存
        this.saveUser()
      }, onClickView(row) {
        this.userInfoDialogShow = true
        this.userDetail = row
        if (this.userDetail.organization == null) {
          this.userDetail.organization = {}
        }
        if (this.userDetail.position == null) {
          this.userDetail.position = {}
        }
      }, onTypeChange(val) {
        for (let i = 0; i < this.itemList.length; i++) {
          if (this.itemList[i].id == val) {
            this.userDetail.type = this.itemList[i].type
          }
        }
      }, onClickShowBigImg(url) {
        this.bigImgDialogShow = true;
        this.bigImgUrl = url;
      }, onClickExport() {
        if (this.selectRowList == null || this.selectRowList.length == 0) {
          this.$message({
            message: '请选择对象',
            type: 'warning',
            duration: 1000
          })
          return
        }
        const array = []
        for (let i = 0; i < this.selectRowList.length; i++) {
          array.push(this.selectRowList[i].id)
        }
        const data = new FormData()
        data.append('ids', array)

        this.$message({
          message: '操作中',
          type: 'warning',
          duration: 1000
        })

        exportExcel(data).then(response => {
          console.log(response)
          this.$message({
            message: '导出成功',
            type: 'success',
            duration: 3000
          })
          window.open(response.data, '_blank');
        }).catch((e) => {

        })
      }
    }
  }
</script>
